<template>
  <div class="head-tab">
    <div
      v-for="item in tabs"
      :key="item.path"
      :class="routeName == item.path ? 'tab-left-plus' : 'tab-left'"
    >
      <span class="tab-text tab-radius"></span>
      <span @click="toPath(item.path)" class="tab-text">{{
        item.meta.title
      }}</span
      ><span
        class="tab-close tab-text"
        v-if="item.meta.title != '首页'"
        @click="clostTab(item.path, routeName == item.path ? true : false)"
        ><el-icon
          ><el-icon><CircleCloseFilled /></el-icon></el-icon
      ></span>
    </div>
  </div>
</template>
<script >
import { toRefs, reactive, onMounted, watch } from 'vue'

import router from '@/router'
export default {
  setup() {
    const route = useRoute()
    const routeName = computed(() => `${String(route.name || route.path)}`)
    const state = reactive({
      tabs: [{ path: '/', meta: { title: '首页' } }],
    })
    watch(route, () => {
      getHeadTab()
    })
    onMounted(() => {
      getHeadTab()
    })
    const toPath = (path) => {
      router.push(path)
    }
    const clostTab = (path, isCheck) => {
      state.tabs.forEach((item, index) => {
        if (item.path == path) {
          state.tabs.splice(index, 1)
        }
      })
      //如果当前选择的tab删除掉，就跳转到最后一个tab
      if (isCheck) {
        let pahtTemp = state.tabs[state.tabs.length - 1].path
        router.push(pahtTemp)
      }
    }
    const getHeadTab = () => {
      let matched = route.matched.filter((item) => item.meta && item.meta.title)
      const first = matched[0]
      if (
        first &&
        first.name.trim().toLocaleLowerCase() !== '/'.toLocaleLowerCase() &&
        matched.length >= 1
      ) {
        //单菜单

        let isAdd = true
        state.tabs.forEach((item) => {
          console.log(
            'matched[matched.length - 1].path:',
            matched[matched.length - 1].path
          )
          if (item.path == matched[matched.length - 1].path) {
            isAdd = false
          }
        })
        if (isAdd) {
          state.tabs.push(matched[matched.length - 1])
        }
      }
      //   console.log('matchedTab==:', matched[0])
      //   console.log('matchedTab==:', '========', matched.length)
      //   console.log('state.tabs.==:', '========', state.tabs)
      //   tabs.concat(matched[1])
    }
    return {
      ...toRefs(state),
      getHeadTab,
      toPath,
      clostTab,
      routeName,
    }
  },
}
</script>

<style scoped>
.head-tab {
  padding-top: 5px;
  border-bottom: 1px solid rgb(223, 216, 216);
  height: 28px;
  padding-left: 5px;
}
.tab-left {
  float: left;
  margin-left: 10px;
  padding: 3px 8px;
  border: 1px solid rgb(223, 216, 216);
  font-size: 12px;
  border-radius: 3px;
}
.tab-left:hover {
  color: rgb(82, 168, 243);
  border: 1px solid rgb(82, 168, 243);
}
.tab-left-plus {
  float: left;
  margin-left: 10px;
  padding: 3px 8px;
  border: 1px solid rgb(82, 168, 243);
  color: white;
  background: rgb(82, 168, 243);
  font-size: 12px;
  border-radius: 3px;
}
.tab-left-plus .tab-radius {
  width: 8px;
  height: 8px;
  background: rgb(250, 250, 250);
  border-radius: 5px;
  margin-top: 5px;
  margin-right: 4px;
}
.tab-left-plus .tab-close:hover {
  background: white;
  color: rgb(82, 168, 243);
  border-radius: 6px;
  width: 12px;
  height: 13px;
}
.tab-text {
  display: block;
  float: left;
}
.tab-left .tab-close {
  /* background: rgb(1, 16, 29);
  color: white; */
  margin-top: 1.5px;
  margin-left: 2px;
  border-radius: 6px;
  height: 13px;
}
.tab-left-plus .tab-close {
  background: rgb(82, 168, 243);
  color: white;
  margin-top: 1.5px;
  margin-left: 2px;
  border-radius: 6px;
  height: 13px;
}
.tab-left .tab-close:hover {
  background: rgb(82, 168, 243);
  color: white;
  border-radius: 6px;
  width: 12px;
  height: 13px;
}
</style>
